<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" inline>
      <el-form-item label="数据同步日期" prop="date">
        <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="daterange" placeholder="选择" start-placeholder="开始日期" end-placeholder="结束日期" clearable :picker-options="pickerOptions" />
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-select v-model="form.account" size="medium" placeholder="请选择账号" filterable clearable style="width:160px" @change="handleChange">
          <el-option v-for="item in list" :key="item.account" :label="item.account" :value="item.account">
            <span>
              <span style="float: left">{{ item.account }}</span>
              <span v-if="item.status === 'success'" style="float: right; color: #67c23a; font-size: 13px">
                <i class="el-icon-success" />
              </span>
            </span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="qr-container">
      <QrCode v-loading="qrLoading" :item="targetItem" :src="imgUrl" @sync="syncHandler" />
    </div>
  </div>
</template>

<script>
import QrCode from './qrCode.vue'
import { getQrApi, cycleApi, syncApi } from '@/api/scanCode'
export default {
  name: 'ScanCode',
  components: {
    QrCode
  },
  data() {
    return {
      form: {
        date: [],
        account: ''
      },
      list: [
        { 'account': '13485857472', 'status': 'pending' },
        { 'account': '13956202890', 'status': 'pending' },
        { 'account': '15055798180', 'status': 'pending' },
        { 'account': '13675539155', 'status': 'pending' },
        { 'account': '18356200036', 'status': 'pending' },
        { 'account': '18715326560', 'status': 'pending' },
        { 'account': '15215595835', 'status': 'pending' },
        { 'account': '17729913512', 'status': 'pending' }
      ],
      targetItem: {
        account: '',
        status: ''
      },
      imgUrl: '',
      tmpTime: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate) {
            this.tmpTime = minDate.getTime()
          }
          if (maxDate) {
            this.tmpTime = ''
          }
        },
        disabledDate: (time) => {
          const day30 = 30 * 24 * 60 * 60 * 1000
          const minTime = this.tmpTime - day30
          if (this.tmpTime !== '') {
            return time.getTime() < minTime || time.getTime() > this.tmpTime
          } else {
            return time.getTime() > Date.now() - 8.64e7 * 2
          }
        }
      },
      timer: null,
      qrLoading: false
    }
  },
  created() {

  },
  methods: {
    handleChange(val) {
      this.targetItem = this.list.find(item => {
        return item.account === val
      })
      if (this.timer) {
        clearInterval(this.timer)
      }
      const { account } = this.form
      cycleApi({ account }).then(res => {
        if (res.status === 'success') {
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].account === val) {
              this.list[i].status = 'success'
              break
            }
          }
        } else {
          this.getQrImg()
        }
      })
    },
    getQrImg() {
      const { account } = this.form
      this.qrLoading = true
      getQrApi({ account }).then(res => {
        // const ss = {
        // 'optType': '01',
        // 'qrCodeId': '82bc7660b2cd8aad899d5df9f9e7e16e',
        // 'currentEnvironment': '99',
        // 'member': '0902',
        // 'serialNo': '7108244814018248331654462237'
        // }
        this.imgUrl = res.img
        this.qrLoading = false
        this.timer = setInterval(() => {
          console.log('开始调用循环接口')
          this.cycleHandler(res.serial)
        }, 5000)
      })
    },
    cycleHandler(serial) {
      const { account } = this.form
      cycleApi({ serial, account }).then(res => {
        if (res.status === 'success') {
          this.targetItem.status = 'success'
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].account === account) {
              this.list[i].status = 'success'
              break
            }
          }
          clearInterval(this.timer)
        }
      })
    },
    syncHandler() {
      const { date, account } = this.form
      const [beginDate, endDate] = date
      syncApi({ account, beginDate, endDate }).then(res => {
        this.$message.success('同步数据成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.qr-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  padding: 20px;
}
</style>
